// 变量大的定义
let tbody = document.querySelector('tbody');
let selNum = 0;
let sumPrice = 0;
let selNumspan = document.querySelector('.selNumspan');
let selsumPrice = document.querySelector('.selsumPrice');
let discount = document.querySelector('.discount');
let discountNum = 0;
let checkController = document.querySelector('.checkController');
let delChoice = document.querySelector('.delChoice');
let inputNum = 0;
let addGoods = document.querySelector('.addGoods');
let carInfo = [{
        goodsName: '衣服A',
        goodsDetail: 'Santic森地客 春秋骑行服自行车骑行长袖套装冬季骑行长裤男(含1件样衣)',
        goodsPrice: '200',
        goodsDiscount: '8折',
        goodsSize: 'L',
        goodsNumber: 1,
        isCheck: false
    },
    {
        goodsName: '衣服B',
        goodsDetail: 'Santic森地客 春秋骑行服自行车骑行长袖套装冬季骑行长裤男(含1件样衣)',
        goodsPrice: '100',
        goodsDiscount: '8折',
        goodsSize: 'XXL',
        goodsNumber: 1,
        isCheck: false
    },
    {
        goodsName: '衣服C',
        goodsDetail: 'Santic森地客 春秋骑行服自行车骑行长袖套装冬季骑行长裤男(含1件样衣)',
        goodsPrice: '300',
        goodsDiscount: '8折',
        goodsSize: 'XL',
        goodsNumber: 1,
        isCheck: false
    }
];

// 初始化渲染
render();

// 点击全选时选中所有，并修改所有数据
checkController.addEventListener('change', function() {
    // 所有复选框状态随总开关状态一致
    carInfo.forEach(function(item) {
        item.isCheck = checkController.checked
    });

    // if (checkController.checked == true) {
    //     sumPrice = 0
    // }
    render()
})

// 单击单个复选框时对应数据的修改
document.querySelector('tbody').addEventListener('change', function(e) {
    // 出发input事件时
    if (e.target.matches(`input[type="checkbox"]`)) {
        // 判断总开关是否需要全勾选
        checkController.checked = [...document.querySelectorAll(`tbody input[type='checkbox']`)].every(function(item) {
            return item.checked
        })
        carInfo[e.target.dataset.index].isCheck = e.target.checked;

        render();

    }
})

// 事件委托：单击删除对应
tbody.addEventListener('click', function(e) {
    // 单击删除对应行
    if (e.target.matches("a")) {
        carInfo.splice(e.target.dataset.index, 1);
        render();
    };

})

// 删除选中的商品
delChoice.onclick = function() {
    carInfo = carInfo.filter(function(item) {
        return !item.isCheck
    });
    carInfo.forEach(function(item) {
        item.isCheck = false
    });

    render();
}

// 数量框的数值改变时，修改对应总价
let inputAll = document.querySelectorAll('.inputNum');
tbody.addEventListener('change', function(e) {
    if (e.target.matches('.inputNum')) {
        carInfo[e.target.dataset.index].goodsNumber = e.target.value
        render();

    }


})

addGoods.onclick = function() {
    carInfo.push({
        goodsName: '衣服C',
        goodsDetail: 'Santic森地客 春秋骑行服自行车骑行长袖套装冬季骑行长裤男(含1件样衣)',
        goodsPrice: '300',
        goodsDiscount: '8折',
        goodsSize: 'XL',
        goodsNumber: 1,
        isCheck: false
    });
    (checkController.checked == true) && (carInfo[carInfo.length - 1].isCheck = true);

    render();

}


// 渲染函数
function render() {
    let trCont = '';
    carInfo.forEach(function(item, index) {
        trCont += `
                    <tr>
                    <td>
                        <input type="checkbox" name="" class="" data-index = ${index}  ${item.isCheck &&'checked'}>
                    </td>
                    <td>
                        ${item.goodsName}
                    </td>
                    <td>
                        <span>
                        ${item.goodsDetail}
                        </span>
                    </td>
                    <td>
                    ${item.goodsPrice}
                    </td>
                    <td>
                    ${item.goodsDiscount}
                    </td>
                    <td>
                    ${item.goodsSize}
                    </td>
                    <td>
                        <input type="number" name="" min = '1' class="inputNum" data-index=${index} value="${item.goodsNumber}"  id="">
                    </td>
                    <td>
                        <a href="javascript:;" data-index = ${index}>删除</a>
                        
                    </td>
                </tr>
                 `
    });
    tbody.innerHTML = trCont;
    count();

    // 选中数量、价格总计，优惠金额的数据插入
    selNumspan.innerText = selNum;
    selsumPrice.innerText = sumPrice;
    discount.innerHTML = discountNum;

    // 若此时无商品可选，则复选框总控制器处于关闭状态
    (carInfo.length == 0) && (checkController.checked = false)

    // (checkController == true) && ()

}
// 结算数据函数
function count() {
    // 每次计算时，先将总价和优惠清空
    sumPrice = 0;
    discountNum = 0;

    // 选中数量赋值
    selNum = carInfo.filter(function(item) {
        return item.isCheck
    }).length;

    // 选中的价格赋值  
    carInfo.filter(function(item) {
        return item.isCheck
    }).forEach(function(item) {
        sumPrice += item.goodsNumber * item.goodsPrice
    })

    // 优惠的价格赋值
    carInfo.filter(function(item) {
        return item.isCheck
    }).forEach(function(item) {
        discountNum += item.goodsPrice * item.goodsNumber * 0.2
    })

}